import React, { useState } from 'react';
import { Input, Col, Row, Form, Button, Modal, Radio, message } from 'antd'
import { userRegister } from '@/apis/user';

function AddUser({getList}) {
    const [loading, setLoading] = useState(false)
    const [open, setOpen] = useState(false)
    //表单重置
    const [form] = Form.useForm()
    const showModal = () => {
        setOpen(true)
    };
    //添加数据
    const handleOk = async () => {
        try {
            setLoading(true)
            const formdata = await form.validateFields()
            const {msg,permission,sp_role} = formdata
            const data = {
                sp_role,
                permission,
                msg
            }
            const res = await userRegister(data)
            if(res.code == 200){
                setOpen(false)
                getList()
                message.success('添加成功')
            }
            else{
                message.success(res.message)
            }
        } catch (error) {
            message.error('请填写完整的表单！')
        }
        setLoading(false)
    };
    const handleCancel = () => {
        setOpen(false)
    }

    return (
        <>
            {/* 表格数据 */}
            <Row justify="start" className='RowPadd'>
                <Col >
                    <Button onClick={showModal} type="primary">添加</Button>
                </Col>
            </Row>
            <Modal
                open={open}
                title="添加用户"
                onOk={handleOk}
                onCancel={handleCancel}
                width={600}
                centered={true}
                footer={[
                    <Button type="primary" key="submit" loading={loading} onClick={handleOk}>
                        添加
                    </Button>,
                    <Button
                        type="primary"
                        key="close"
                        onClick={handleCancel}
                    >
                        关闭
                    </Button>,
                ]}
            >
                <div style={{ padding: "40px", paddingBottom: "5px" }}>
                    <Form form={form} initialValues={{ permission: 0 }} >
                        {/* 传入locale属性 控制中文显示*/}
                        <Form.Item label="用户名" name="sp_role"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入用户名',
                                },
                            ]}>
                            <Input placeholder="" />
                        </Form.Item>
                        <Form.Item label="用户权限" name="permission" rules={[
                            {
                                required: true,
                                message: '请选择用户权限',
                            },
                        ]}>
                            <Radio.Group>
                                <Radio value={1}>有</Radio>
                                <Radio value={0}>无</Radio>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item
                            name="msg"
                            label="详细信息"
                            rules={[
                                {
                                    // required: true,
                                    message: 'Please input Intro',
                                },
                            ]}
                        >
                            <Input.TextArea showCount style={{ height: "120px" }} />
                        </Form.Item>
                    </Form>
                </div>
            </Modal>
        </>
    )
}

export default AddUser